<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        background: rgb(221, 208, 208);
        /*background:#333;*/
        font-family: 'Arial';
      }
      h1 {
        color: white;
      }
      .mermaid2 {
        display: none;
      }
      .customCss > rect,
      .customCss {
        fill: #ff0000 !important;
        stroke: #ffff00 !important;
        stroke-width: 4px !important;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
    <pre class="mermaid" style="width: 100%; height: 20%">

      gitGraph
       class BankAccount{
        +String owner
        +BigDecimal balance
        +deposit(amount) bool
        +withdrawl(amount) int
       }
       cssClass "BankAccount" customCss
    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        theme: 'default',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
        flowchart: { curve: 'linear', htmlLabels: true },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"arial", sans-serif',
        // themeVariables: {
        //   fontFamily: '"arial", sans-serif',
        // },
        curve: 'linear',
        securityLevel: 'loose',
      });
      function callback() {
        alert('It worked');
      }
    </script>
  </body>
</html>
